import styled from "styled-components";
import { Card, Avatar } from "antd";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";
import { getHomeInfo } from "@/api/login";

const Styled = styled.div`
  :where(.css-dev-only-do-not-override-38x1r).ant-card .ant-card-body {
    padding: 20px 24px;
  }
  .head {
    display: flex;
    align-items: center;
    .info {
      margin-left: 20px;
      .info-top {
        font-size: 16px;
      }
      .info-bottom {
        margin-top: 5px;
        color: #0000;
        white-space: nowrap;
        background-clip: text;
        display: inline-block;
        font-weight: 500;
        background-image: linear-gradient(90deg, red 0%, green 50%, blue 100%);
      }
    }
    .statistic {
      margin-left: auto;
      display: flex;
      align-items: center;
      .ant-statistic {
        margin-left: 80px;
        font-size: 14px;
        width: 80px;
        p {
          margin-bottom: 8px;
        }
      }
    }
  }

  section {
    width: 100%;
    margin-top: 15px;

    .body {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .my-card {
      width: 24%;

      .ant-card-body {
        display: flex;

        align-content: center;
        .ant-statistic {
          margin-left: auto;
          color: rgb(118, 124, 130);
          font-size: 14px;
          font-weight: 500;
          span {
            color: rgb(51, 54, 57);
            font-size: 24px;
            font-weight: 400;
          }
        }
      }
    }
  }
`;

const Home = () => {
  const userStore = useSelector((state) => state.user);
  const { userInfo } = userStore;

  const [sentence, setSentence] = useState("");
  const [homeInfo, setHomeInfo] = useState({});

  //随机获取语句
  async function getOneSentence() {
    fetch("https://v1.hitokoto.cn?c=i")
      .then((res) => res.json())
      .then((data) => {
        setSentence(data.hitokoto);
      })
      .catch(() =>
        setSentence("天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。")
      );
  }

  useEffect(() => {
    (async function () {
      getOneSentence();
      let res = await getHomeInfo();

      setHomeInfo({ ...homeInfo, ...res.data });
    })();
  }, []);

  return (
    <Styled>
      <Card>
        <div className="head">
          <Avatar size={60} src={userInfo?.data?.avatar} />
          <div className="info">
            <p className="info-top">Hello，{userInfo?.data?.nickname}</p>
            <span className="info-bottom">{sentence}</span>
          </div>
          <div className="statistic">
            <div className="ant-statistic">
              <p>Stars</p>
              <a
                href="https://github.com/szluyu99/gin-vue-blog"
                target="_blank"
              >
                <img
                  alt="stars"
                  src="https://badgen.net/github/stars/szluyu99/gin-vue-blog"
                />
              </a>
            </div>
            <div className="ant-statistic">
              <p>Forks</p>
              <a
                href="https://github.com/szluyu99/gin-vue-blog"
                target="_blank"
              >
                <img
                  alt="forks"
                  src="https://badgen.net/github/forks/szluyu99/gin-vue-blog"
                />
              </a>
            </div>
          </div>
        </div>
      </Card>

      <section>
        <div className="body">
          <Card className="my-card">
            <svg
              t="1705840991960"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4214"
              width="60"
              height="60"
            >
              <path
                d="M647.172096 480.3072a219.4432 219.4432 0 1 0-270.336 0 371.3536 371.3536 0 0 0-230.5536 344.4736v74.24a36.8128 36.8128 0 0 0 36.5568 36.9664h658.2784a36.8128 36.8128 0 0 0 36.5568-36.9664v-74.24A371.3024 371.3024 0 0 0 647.172096 480.256z m219.5456-13.3632a186.88 186.88 0 0 0 47.5648-124.5184 184.4224 184.4224 0 0 0-182.8864-185.5488c-3.0208 0-5.8368 0.768-8.8064 0.9216 15.9744 23.552 28.0064 49.5616 35.584 77.0048h-0.3584a247.3984 247.3984 0 0 1-49.7664 242.3808c16.6912 7.5776 205.824 87.2448 205.824 347.5456h73.5744a36.9664 36.9664 0 0 0 36.5568-36.9664v-57.4976a296.192 296.192 0 0 0-157.2864-263.3216z m-551.1168 10.24a247.3984 247.3984 0 0 1-49.8176-242.3296 259.9936 259.9936 0 0 1 35.584-77.056c-2.816 0-5.632-0.9216-8.8064-0.9216a184.4224 184.4224 0 0 0-182.8352 185.5488c0 45.9264 16.896 90.2656 47.5648 124.5184A296.0896 296.0896 0 0 0 0.004096 730.2656v57.3952a36.8128 36.8128 0 0 0 36.5568 36.9664h73.1648c0-260.1472 189.184-339.8656 205.824-347.4432z"
                fill="#40C9C6"
                p-id="4215"
              ></path>
            </svg>
            <div className="ant-statistic">
              <p>访问量</p>
              <span>{homeInfo.viewCount ?? 0}</span>
            </div>
          </Card>

          <Card className="my-card">
            <svg
              t="1705842263834"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4412"
              width="60"
              height="60"
            >
              <path
                d="M512 1024C229.232 1024 0 794.768 0 512 0 229.232 229.232 0 512 0c282.768 0 512 229.232 512 512 0 282.768-229.232 512-512 512z m131.072-532.776c-35.52 33.96-82.4 52.84-131.072 52.776-48.96 0.072-96.08-19.016-131.656-53.336C315.096 532.016 272 603.504 272 684.704c0 43.744 20.368 60.616 80.192 73.424C398.448 768 453.712 768 512 768c59.728 0 118.968 0 160.632-9.872 58.936-14 79.368-29.68 79.368-73.424 0-80.856-43.544-152.04-108.928-193.48zM512 488c75.744 0 137.144-62.68 137.144-140S587.744 208 512 208s-137.144 62.68-137.144 140S436.256 488 512 488z"
                fill="#34BFA3"
                p-id="4413"
              ></path>
            </svg>
            <div className="ant-statistic">
              <p>用户量</p>
              <span>{homeInfo.userCount ?? 0}</span>
            </div>
          </Card>

          <Card className="my-card">
            <svg
              t="1705842320801"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5788"
              id="mx_n_1705842320801"
              width="60"
              height="60"
            >
              <path
                d="M288 416h192c17.67 0 32-14.33 32-32s-14.33-32-32-32H288c-17.67 0-32 14.33-32 32s14.33 32 32 32zM288 576h352c17.69 0 32-14.31 32-32s-14.31-32-32-32H288c-17.67 0-32 14.31-32 32s14.33 32 32 32zM480 672H288c-17.67 0-32 14.31-32 32s14.33 32 32 32h192c17.67 0 32-14.31 32-32s-14.33-32-32-32zM939.98 645.16L826.84 532.02c-6.25-6.25-14.44-9.37-22.63-9.37s-16.38 3.12-22.63 9.37L553.37 760.24c-6 6-9.37 14.14-9.37 22.63V896c0 17.67 14.33 32 32 32h113.14c8.49 0 16.63-3.37 22.63-9.37l228.21-228.21c12.49-12.5 12.49-32.76 0-45.26zM675.88 864H608v-67.88L804.21 599.9l67.88 67.88L675.88 864z"
                fill="#F4516C"
                p-id="5789"
              ></path>
              <path
                d="M448 864H192V160h383.86l0.11 128.09c0.06 35.23 28.78 63.91 64 63.91H768v80c0 17.67 14.33 32 32 32s32-14.33 32-32V274.87c0-8.58-3.45-16.8-9.56-22.82L673.09 105.18A32.002 32.002 0 0 0 650.66 96H160c-17.67 0-32 14.33-32 32v768c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32s-14.33-32-32-32z m319.72-576H639.97l-0.1-125.73L767.72 288z"
                fill="#F4516C"
                p-id="5790"
              ></path>
            </svg>
            <div className="ant-statistic">
              <p>文章量</p>
              <span>{homeInfo.articleCount ?? 0}</span>
            </div>
          </Card>

          <Card className="my-card">
            <svg
              t="1705842343064"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6881"
              width="60"
              height="60"
            >
              <path
                d="M622.56056 464.834794c0 27.928073 22.73684 50.64854 50.664913 50.64854 27.956725 0 50.693566-22.720468 50.693566-50.64854 0-27.928073-22.73684-50.66389-50.693566-50.66389C645.2974 414.171927 622.56056 436.907745 622.56056 464.834794"
                fill="#36A3F7"
                p-id="6882"
              ></path>
              <path
                d="M931.254178 211.459063c0-40.637536-33.05893-73.698512-73.728188-73.698512L166.471964 137.76055c-40.637536 0-73.727165 33.059953-73.727165 73.698512l0 506.796488c0 40.637536 33.088606 73.696466 73.727165 73.696466l251.16846 0 94.343715 94.28641 94.315062-94.28641 251.226788 0c40.669258 0 73.728188-33.05893 73.728188-73.696466l0-82.560344-0.089028-1.282203L931.254178 211.459063zM875.96699 695.220928c0 22.88522-18.558681 41.444924-41.443901 41.444924L579.446623 736.665853l-67.462484 67.490114-67.430762-67.490114L189.506587 736.665853c-22.88522 0-41.4746-18.559705-41.4746-41.444924L148.031986 234.493685c0-22.88522 18.58938-41.488927 41.4746-41.488927l645.01548 0c22.88522 0 41.443901 18.603707 41.443901 41.488927l0 396.579247 0 36.161594L875.965967 695.220928z"
                fill="#36A3F7"
                p-id="6883"
              ></path>
              <path
                d="M461.321272 464.834794c0 27.928073 22.735817 50.64854 50.662867 50.64854 27.929096 0 50.66389-22.720468 50.66389-50.64854 0-27.928073-22.734794-50.66389-50.66389-50.66389C484.057089 414.171927 461.321272 436.907745 461.321272 464.834794"
                fill="#36A3F7"
                p-id="6884"
              ></path>
              <path
                d="M300.083008 464.834794c0 27.928073 22.735817 50.64854 50.66389 50.64854 27.927049 0 50.662867-22.720468 50.662867-50.64854 0-27.928073-22.735817-50.66389-50.662867-50.66389C322.817802 414.171927 300.083008 436.907745 300.083008 464.834794"
                fill="#36A3F7"
                p-id="6885"
              ></path>
            </svg>
            <div className="ant-statistic">
              <p>留言量</p>
              <span>{homeInfo.messageCount ?? 0}</span>
            </div>
          </Card>
        </div>
      </section>

      <Card
        title="项目"
        extra={
          <a style={{ color: "rgb(107 184 191)" }} href="#">
            更多
          </a>
        }
        style={{
          width: "100%",
          marginTop: "15px",
        }}
      >
        {new Array(5).fill().map((item, index) => {
          return (
            <Card hoverable key={index} style={{ marginTop: "15px" }}>
              <p>Gin Blog Admin</p>
              <span>这是React+Node.js开发的项目</span>
            </Card>
          );
        })}
      </Card>
    </Styled>
  );
};

export default Home;
